<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .header {
        width: 100vw;
        border: 2px solid red;

    }

    .header .header-w {
        width: 100%;
        height: 50px;
        background-color: aqua;
        display: flex;
    }

    .header .logo {
        width: 150px;
        height: 100%;
        background-color: white;
    }
</style>

<body>
    <div id="app">
        <s-header></s-header>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const { createApp, ref, computed } = Vue
    let header = {
        props: [],
        setup(props) {
            // let num = props.title
            // let a = computed(() => {
            //     return props.a
            // })
            return {
                // num,
                // a
            }
        },
        template: ` 
        <div class="header">
            {{title}}
        <s-header-w :a='a' title='首页' />
        </div>`
    }
    let s_header_w = {
        props: ['a', 'title'],
        setup(props) {
            let num = props.title
            let a = computed(() => {
                return props.a
            })
            return {
                num,
                a
            }
        },
        template: ` 
        <div class="header-w">
        <s_logo title='我是logo' />    
        {{ num }}
        </div>`
    }
    let s_logo = {
        props: {
            title: {
                type: String
            }
        },
        setup(props) {
            let title = props.title
            return {
                title
            }
        },
        template: `
        <div class="logo">
            {{title}}
        </div>
        `
    }
    const app = createApp({
        setup() {
            let a = ref(0)
            return {
                a
            }
        }
    })
    app.component("s-header", header)
    app.component("s-header-w", s_header_w)
    app.component("s_logo", s_logo)
    app.mount("#app")
</script>

</html>